<template>
  <div class="wrapper">
    <van-nav-bar title="书籍信息" class="navbar">
      <template #left>
        <van-icon
          name="arrow-left"
          class="icon"
          size="20"
          @click="onClickLeft"
        />
      </template>
    </van-nav-bar>
    <div class="bg"></div>
    <div class="container">
      <div class="bookInfo">
        <div class="image">
          <img :src="bookInfo.image" alt="" />
        </div>
        <div class="author">{{ bookInfo.author }}</div>
        <div class="bookName">{{ bookInfo.book_name }}</div>
        <div class="middle">
          <div class="detail">
            <div class="title">简介</div>
            <div class="detailContent">{{ bookInfo.details }}</div>
          </div>
        </div>
        <div class="middle">
          <div class="information_wrapper">
            <div class="title">信息</div>
            <div class="information">
              <div class="item">
                <div class="label">出租人:</div>
                <div class="data">{{ bookInfo.owner }}</div>
                <!-- <div class="data">张三</div> -->
              </div>
              <div class="item">
                <div class="label">借阅时长:</div>
                <div class="data">{{ bookInfo.lend_time }}天</div>
              </div>
              <div class="item">
                <div class="label">联系电话:</div>
                <div class="data">{{ bookInfo.phone }}</div>
              </div>
              <div class="item">
                <div class="label">取书地址:</div>
                <div class="data">{{ bookInfo.address }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="btn" @click="toBorrow">
          <button>借阅</button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      id: "",
      bookInfo: {},
    };
  },
  async created() {
    this.id = this.$route.params.id;
    let res = await this.getBookDetail(this.id);
    this.bookInfo = res;
    console.log(this.bookInfo);
  },
  methods: {
    async getBookDetail(id) {
      let res = await this.$http({
        url: `/book/${id}`,
      });
      return res[0];
    },
    onClickLeft() {
      this.$router.back();
    },
    async toBorrow() {
      let { token } = this.$store.state;
      let { username } = this.$store.state.userInfo;
      if (!token) {
        this.$router.push("/login");
        this.$toast({
          message: "请先登录",
        });
        return;
      }
      if (username == this.bookInfo.owner) {
        this.$toast({
          message: "不能借阅自己发布的书籍",
        });
        return;
      }
      let { status, message } = await this.$http({
        url: "/book/borrow",
        data: {
          bookid: this.id,
          owner: this.bookInfo.owner,
        },
        method: "POST",
        headers: {
          Authorization: token,
        },
      });
      if (status != 200) {
        this.$toast({
          message,
        });
        return;
      }
      this.$router.push("/bookstatus");
      this.$toast({
        message,
      });
    },
  },
};
</script>

<style scoped>
.navbar {
  position: sticky;
  top: 0;
  left: 0;
}
.icon {
  color: #808080;
}
.bg {
  background-color: #4d65c1;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.container {
  background-color: #ffffff;
  margin-top: 6rem;
  border-top-left-radius: 3.125rem;
  border-top-right-radius: 3.125rem;
  position: relative;
}
.bookInfo {
  position: relative;
  top: -3rem;
}
.image {
  text-align: center;
}
.image img {
  border-radius: 1.25rem;
  height: 12.5rem;
  width: 9.375rem;
  box-shadow: 5px 10px 8px #888888;
}
.author {
  text-align: center;
  margin-top: 1.25rem;
  margin-bottom: 0.3125rem;
  font-size: 0.875rem;
}
.bookName {
  text-align: center;
  font-weight: 600;
}
.middle {
  margin-top: 1.5625rem;
  padding: 0 1.25rem;
}
.title {
  width: 2.1875rem;
  border-bottom: 0.21875rem solid #5a78ec;
}
.detailContent {
  margin-top: 0.9375rem;
  font-size: 0.9375rem;
  color: #474749;
}
.information {
  margin-top: 1.5625rem;
  font-size: 0.9375rem;
  color: #474749;
}
.item {
  display: flex;
  margin: 1.5rem 0;
}
.label {
  width: 4.375rem;
}
.data {
  margin-left: 1.25rem;
}
.btn {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
}
.btn button {
  background-color: #5a78ec;
  width: 15rem !important;
  height: 2.5rem;
  border-radius: 0.9375rem;
  color: #ffffff;
  font-weight: 500;
  font-size: 0.9375rem;
  border: none;
}
</style>